<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<script>
		if (self != top) top.location.replace(location.href);
	</script>
	<title>商品详情</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/pay.css">
	<style>
		.img_t {
			width: 100%;
			height: 250px;
		}

		.mains {
			padding: 10px 20px;
			font-size: 16px;
			background-color: #FFFFFF;
			letter-spacing: 1px;
			margin-bottom: 10px;
		}

		.mains div {
			padding: 5px 0;
		}

		.div_a {
			background-color: red;
			color: white;
			font-weight: 600;
			padding: 8px 20px;
			border-radius: 25px;
		}

		.mains2 {
			padding: 10px 20px;
			font-size: 16px;
			background-color: #FFFFFF;
			letter-spacing: 1px;
			margin-bottom: 10px;
		}

		.main_bot {
			/*border-top: silver 1px solid;*/
			width: 90%;
			padding: 15px 5%;
			font-size: 16px;
			background-color: #FFFFFF;
			letter-spacing: 1px;
			text-align: right;
			position: fixed;
			bottom: 0;
		}

		.p1 {
			padding: 5px 0;
			font-size: 12px;
			background-color: #e2e1e1;
			text-align: center;
		}

		.p2 {
			padding: 5px 0;
			font-size: 12px;
			background-color: #d54d4d;
			text-align: center;
		}

		[v-if] {
			display: none;
		}
	</style>
</head>

<body>

	<div id="app">
		<div class="header">
			<div class="header_title">商品详情</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>
		<div style="height:40px"></div>
		<div>
			<!-- <div>
				<img src="image/zg.jpg" class="img_t" />
			</div> -->
			<div class="mains">
				<div v-text="item.name">
					<!-- <span style="float: right;font-size: 12px;color: #b3c0d1">已有28人购买</span> -->
				</div>
				<div style="font-size: 14px">
					￥<span style="color:red" v-text="item.fee/100"></span>
					<!-- <span style="float: right;font-size: 12px;color: #b3c0d1">数量不限</span> -->
				</div>
			</div>
			<!-- <div class="mains2">
				分类
				<span v-for="(value,index) in values">
					<p @click="colors(index)" :class="{'p2':current_index==index,'p1':values_index==1}">{{value.name}}
					</p>
				</span>
			</div> -->
			<div class="mains" style="margin-bottom: 60px">
				<div>商品详情：</div>
				<div style="font-size: 14px;" v-text="item.remark"></div>
			</div>
			<div class="main_bot" v-if="!(item.id in set)">
				<div>
					<!-- <span style="float: left;color: #b3c0d1">￥<span style="color:red ">{{money}}</span>RMB</span> -->
					<span class="div_a" @click="vshow=true">我要购买</span>
				</div>
			</div>
		</div>

		<!--支付-->
		<!-- <div class="pay_d" v-show="vshow" v-cloak>
			<div><img src="image/s3.png" style="width: 16px;height: 16px" @click="closes()" /></div>
			<div style="text-align: center;font-size: 34px;padding: 10px 0;font-weight: 600"><span>￥</span>{{money}}
			</div>
			<div class="p_div"><span style="float: left">商品名称</span>视频监控</div>
			<div class="p_div" @click="pay_f()"><span style="float: left">付款方式</span>{{name}}<span
					style="font-size: 20px;color: #c9c9c9;padding-left:5px"></span></div>
			<div class="pay_but" @click="payment()">立即付款</div>
		</div> -->

		<div class="pay_dd" v-if="vshow">
			<div class="p_div-left" style="text-align: center">
				<a @click="vshow=false" style="float: left">
					<img src="image/jt1.png" style="width: 14px;vertical-align: middle;" />
				</a>
				支付方式
			</div>
			<div class="p_div-left" @click="wxpay">微信</div>
			<div class="p_div-left" @click="alipay">支付宝</div>
			<!-- <div class="p_div-left" @click="dui('银行卡')">银行卡<span v-if="number=='银行卡'">√</span></div> -->
		</div>

	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="js/wxpay.js"></script>

	<script>
		var tool = {
			alipay: function (id) {
				axios.get('/s/bindingId').then(function (res) {
					location.href = '/wechat/alipay1.html?' + Qs.stringify({
						id: id,
						bindingId: res.data
					});
				});
			},
			wxpay: function (id) {
				axios.get('/s/wxpay1', {
					params: {
						id: id
					}
				}).then(wxPay(function () {
					location.replace('pay_record.html');
				}));
			}
		};

		var id = params().id;


		new Vue({
			el: "#app",
			data: {
				item: {},
				vshow: false,
				set: {}
			},
			created: function () {
				axios.get('/s/pay/list').then(function (res) {
					var set = {};
					res.data.forEach(function (it) {
						set[it.relatedId] = true;
					});
					this.set = set;
				}.bind(this));

				axios.get('/s/charge/' + id).then(function (res) {
					this.item = res.data;
				}.bind(this));
			},
			methods: {
				wxpay: function () {
					tool.wxpay(id);
				},
				alipay: function () {
					tool.alipay(id);
				}
			},
			computed: {

			}

		})
	</script>

</body>

</html>